/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
CSS TABLE OF CONTENTS
-.- - Poppins Font Import
-.- - Body
-.- - List Styles
-.- - Line Heights
-.- - Text Colors
-.- - Background Colors
-.- - Column and Row Architecture
-.- - Cards
-.- - Paragraphs and Labels
-.- - Images
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* -.- - Poppins Font Import */
@font-face {
    font-family: 'Poppins';
    src:
        url('../../fonts/Poppins-ExtraLight.eot') format('embedded-opentype'),
        url('../../fonts/Poppins-ExtraLight.otf') format('opentype'),
        url('../../fonts/Poppins-ExtraLight.woff') format('woff'),
        url('../../fonts/Poppins-ExtraLight.bin') format('truetype'),
        url('../../fonts/Poppins-ExtraLight.svg') format('svg');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src:
        url('../../fonts/Poppins-Light.eot') format('embedded-opentype'),
        url('../../fonts/Poppins-Light.otf') format('opentype'),
        url('../../fonts/Poppins-Light.woff') format('woff'),
        url('../../fonts/Poppins-Light.bin') format('truetype'),
        url('../../fonts/Poppins-Light.svg') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src:
        url('../../fonts/Poppins-Regular.eot') format('embedded-opentype'),
        url('../../fonts/Poppins-Regular.otf') format('opentype'),
        url('../../fonts/Poppins-Regular.woff') format('woff'),
        url('../../fonts/Poppins-Regular.bin') format('truetype'),
        url('../../fonts/Poppins-Regular.svg') format('svg');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src:
        url('../../fonts/Poppins-Bold.eot') format('embedded-opentype'),
        url('../../fonts/Poppins-Bold.otf') format('opentype'),
        url('../../fonts/Poppins-Bold.woff') format('woff'),
        url('../../fonts/Poppins-Bold.bin') format('truetype'),
        url('../../fonts/Poppins-Bold.svg') format('svg');
    font-weight: 700;
    font-style: normal;
}

/* End of Poppins Font Import */

/* -.- - Body */
body {
    font-family: 'Poppins' !important;
    letter-spacing: 0.5px;
}

/* End of Body */

/* Elements - Override */
p {
    line-height: unset;
}

/* End of Elements */


/* List Styles - Right Arrow */
.rightArrow {
    list-style: url("../../img/computing-ict-topics/angle-right-solid.svg") !important;
}

/* End of List Styles */

/* -.- - Line Heights */
.lineHeight24 {
    line-height: 24px;
}

.lineHeight20 {
    line-height: 20px;
}


/* End of Line Heights */

/* -.- - Text Colors */
.orangeColor {
    color: #e38f0a;
}

.goldColor {
    color: #ffcc00;
}

.limeColor {
    color: #dedc00;
}

.whiteColor {
    color: #f5f5f5 !important;
}

.darkBlack {
    color: #111111;
}

.blackColor {
    color: #232629;
}

.gray {
    color: #555555;
}

.gray2 {
    color: #777777;
}

.mLightBlackColor {
    color: #484a4f;
}

.lLightBlackColor {
    color: #393a3f;
}

.lightBlackColor {
    color: #38383a;
}

.creamColor {
    color: #f2f4df;
}

.blueColor {
    color: #5ba1c7;
}

.violetColor {
    color: #5d2945;
}

.twitterColor {
    color: #1394d7;
}

.petrolColor {
    color: #009d8c;
}

.purpleColor {
    color: #865ed9;
}

.dPetrolColor {
    color: #023936;
}

/* End of Text Colors */

/* -.- - Background Colors */
.petrolBackground {
    background-color: #009d8c;
    border-color: #009d8c;
}

.blackBackground {
    background-color: #111111;
    border-color: #111111;
}

.lightBlack {
    background-color: #393a3f;
    border-color: #393a3f;
}

.moreLightBlack {
    background-color: #484a4f;
    border-color: #484a4f;
}

.limeBackground {
    background-color: #dedc00;
    border-color: #dedc00;
}

.lemonBackground {
    background-color: #f5f104;
    border-color: #f5f104;
}

.darkLemonBackground {
    background-color: #ffd240;
    border-color: #ffd240;
}

.violetBackground {
    background-color: #6c3051;
    border-color: #6c3051;
}

.darkerVioletBackground {
    background-color: #5d2945;
    border-color: #5d2945;
}

.darkPetrolBackground {
    background-color: #023936 !important;
    border-color: #023936;
}

.whiteBackground {
    background-color: #ffffff;
    border-color: #ffffff;
}

.lightGreyBackground {
    background-color: #f5f5f5;
    border-color: #f5f5f5;
}


/* End of Background Colors */

/* -.- - Column and Row Architecture */
.firstRowPadTop80 {
    padding-top: 80px;
}

.firstRowPadTop50 {
    padding-top: 50px;
}

.secondRowPad80 {
    padding: 80px;
}

.secondRowPad30 {
    padding: 30px;
}

.pad30pxRightTopBot {
    padding-top: 30px;
    padding-bottom: 30px;
    padding-right: 30px;
}

.padLeft40px {
    padding-left: 40px;
}

.secondRowLeftRight {
    padding-left: 80px;
    padding-right: 80px;
}

.secondRowPad80Less {
    padding: 50px;
}

.bottomPad {
    padding-bottom: 80px;
}

.bottomPadLess {
    padding-bottom: 40px;
}

.bottomPad50px {
    padding-bottom: 50px;
}

.rightColPad20L {
    padding-left: 20px !important;
}

.rightColPad40L {
    padding-left: 40px !important;
}

.rightColPad60L {
    padding-left: 60px !important;
}

.padTop20 {
    padding-top: 20px;
}

.padTop10 {
    padding-top: 10px;
}

.padTop14 {
    padding-top: 14px;
}

.padTop30 {
    padding-top: 30px;
}

.padBottom30 {
    padding-bottom: 30px;
}

.padBottom10 {
    padding-bottom: 10px;
}

.padTop150 {
    padding-top: 150px;
}

.padBottom210 {
    padding-bottom: 210px;
}

.textGap10MTop {
    margin-top: 10px;
}

.textGap20MTop {
    margin-top: 20px;
}

.textGap30MTop {
    margin-top: 30px;
}

.textGap40MTop {
    margin-top: 40px;
}

.textGap320MTop {
    margin-top: 320px;
}

.textGap50MTop {
    margin-top: 50px;
}

.textGap100MTop {
    margin-top: 100px;
}

.textGap150MTop {
    margin-top: 150px;
}

.textGap30MRight {
    margin-left: 30px;
}

.textGap40MRight {
    margin-left: 40px;
}

.textGap50MRight {
    margin-left: 50px;
}

.textGap15MBottom {
    margin-bottom: 15px;
}

.textGap20MBottom {
    margin-bottom: 20px;
}

.textGap10MBottom {
    margin-bottom: 10px;
}

.textGap30MBottom {
    margin-bottom: 30px;
}

/* End of Column and Row Architecture */

/* -.- - Cards */
.cardLightDark {
    padding: 12px 10px;
    border-radius: 6px;
    background-color: #232629;
}

.card {
    padding: 14px 12px;
    border-radius: 6px;
    border: none;
    margin: 0 !important;
}

.bigCard {
    padding: 10px 30px !important;
    border-radius: 6px;
}

.card287w {
    padding: 15px;
    max-width: 287px;
    border-radius: 40px;
}

.card288w {
    padding: 10px;
    max-width: 288px;
    border-radius: 40px;
}

/* End of Cards */

/* -.- - Paragraphs and Labels */
.title36px {
    font-size: 36px;
    font-weight: 700;
}

.title36pxLight {
    font-size: 36px;
    font-weight: 200;
}

.title30px {
    font-size: 30px;
    font-weight: 700;
}

.title24px {
    font-size: 24px;
    font-weight: 700;
}

.title24px {
    font-size: 24px;
    font-weight: 700;
}

.title48px {
    font-size: 48px;
    font-weight: 700;
}

.title62px {
    font-size: 62px;
    font-weight: 700;
}

.title36pxThin {
    font-size: 36px;
    font-weight: 200;
    line-height: 1.2;
}

.title48pxThin {
    font-size: 48px;
    font-weight: 200;
    line-height: 1.2;
}

.title64pxThin {
    font-size: 64px;
    font-weight: 200;
    line-height: 1.2;
}

.titleReg24px {
    font-size: 24px;
    font-weight: 400;
}

.subtitle14px {
    font-size: 14px;
    font-weight: 700;
}

.subtitle22px {
    font-size: 22px;
    font-weight: 700;
}

.subtitle16px {
    font-size: 16px;
    font-weight: 700;
}

.subtitle18px {
    font-size: 18px;
    font-weight: 700;
}

.subtitle20px {
    font-size: 20px;
    font-weight: 700;
}

.subtitle18pxThin {
    font-size: 18px;
    font-weight: 200;
}

.regText18px {
    font-size: 18px;
    font-weight: 400;
}

.regText16px {
    font-size: 16px;
    font-weight: 400;
}

.regText14px {
    font-size: 14px;
    font-weight: 400;
}

.regText9px {
    font-size: 9px;
    font-weight: 400;
}

.regText11px {
    font-size: 11px;
    font-weight: 400;
}

.regText28px {
    font-size: 28px;
    font-weight: 400;
}

.regText28pxThin {
    font-size: 28px;
    font-weight: 200;
}

.boldText28px {
    font-size: 28px;
    font-weight: 700;
}

.regText30px {
    font-size: 30px;
    font-weight: 400;
}

.regText36px {
    font-size: 36px;
    font-weight: 400;
}

/* End of Paragraphs and Labels */

/* -.- Start of Images */
.imgMaxWidth100 {
    max-width: 100%;
}

/* End of Images */